<template>
  <div>
    <h4>树状结构拓扑图</h4>
    <el-button @click="onAdd">新增</el-button>

    <div>
      <vue2-org-tree :data="list"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'org-tree-example',
  data() {
    return {
      list: {
        id: 0,
        label: 'XXX科技有限公司',
        children: [
          {
            id: 2,
            label: '产品研发部',
            children: [
              {
                id: 5,
                label: '研发-前端',
              },
              {
                id: 6,
                label: '研发-后端',
              },
              {
                id: 9,
                label: 'UI设计',
              },
              {
                id: 10,
                label: '产品经理',
              },
            ],
          },
          {
            id: 3,
            label: '销售部',
            children: [
              {
                id: 7,
                label: '销售一部',
              },
              {
                id: 8,
                label: '销售二部',
              },
            ],
          },
          {
            id: 4,
            label: '财务部',
            children: [],
          },
          {
            id: 9,
            label: 'HR人事',
            children: [],
          },
        ],
      },
    };
  },
  methods: {
    onAdd() {
      const data = {
        id: 10,
        label: '财务部一部',
      };

      this.list.children[2].children.push(data);

      console.log('this.list => ', JSON.parse(JSON.stringify(this.list)));
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .org-tree {
  .org-tree-node {
    &.is-leaf {
      padding-left: 3px;
      padding-right: 3px;

      .org-tree-node-label-inner {
        writing-mode: vertical-rl;
      }
    }
  }
}

</style>
